'use client';

import React, { useState, useEffect } from 'react';
import { Divider, Space } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import Image from 'next/image';
import styles from './index.module.scss';


const Header: React.FC = () => {
	const [time, setTime] = useState<Dayjs>();
	useEffect(() => {
		const timer = setInterval(() => {
			setTime(dayjs());
			if (dayjs().format('HH:mm:ss') === '08:00:00') {
				window.location.reload();
			}
		}, 1000);

		return () => clearInterval(timer);
	}, []);

	return (
		<div className={styles.container}>
			<div className={styles.background}>
				<div style={{ position: 'absolute', top: 0, left: 0, display: 'flex' }}>
					<Image
						src='https://uat-base.oss-cn-hangzhou.aliyuncs.com/logo2.png'
                        alt="logoImage"
                        width={106}
                        height={36}
					/>
				</div>
				<div
					style={{ fontSize: 28, color: '#DFF2FF', paddingTop: 13, flex: 1 }}
				>
					供应链数字大屏
				</div>
				<Space
					split={
						<Divider
							type="vertical"
							style={{ background: '#4B4B67', height: 30, marginTop: 6 }}
						/>
					}
					align="start"
					style={{ position: 'absolute', top: 0, right: 0 }}
				>
					<div style={{ textAlign: 'right' }}>
						<div className={styles.textHighlight}>
							{time?.format('HH:mm:ss')}
						</div>
						<div className={styles.text}>{time?.format('YYYY-MM-DD')}</div>
					</div>
				</Space>
			</div>
		</div>
	);
};

export default Header;

